import React, { PureComponent } from 'react'
import './miaosha.scss';
export default class MiaoSha extends PureComponent {
    constructor() {
        super();
        this.state = {
            daojishi: ['00', '00', '00']
        }
        this.timer = null;//定时器
    }
    componentDidMount() {
        console.log(this.props);
        let { currentTime, endTime } = this.props.miaoshaObj;

        let miaoshaTime = new Date(endTime) - new Date(currentTime);
        // console.log(miaoshaTime);
        this.timer = setInterval(() => {
            miaoshaTime -= 1000;
            let time = this.formatTime(miaoshaTime);
            // console.log(time);
            this.setState({
                daojishi: time
            })
        }, 1000);
    }

    //页面卸载前需要将定时器清除
    componentWillUnmount() {
        clearInterval(this.timer);
    }
    formatTime = (date) => {
        let time = date / 1000;
        const s = Math.floor(time % 60);
        const m = Math.floor(time / 60 % 60);
        const h = Math.floor(time / 60 / 60);
        return [h, m, s].map(this.addZero);

    }
    addZero = (n) => {
        return n < 10 ? "0" + n : n;
    }

    render() {
        let { daojishi } = this.state;
        return (
            <div className='miaosha'>
                <span>距结束</span>
                <span>{daojishi[0]}</span> :<span>{daojishi[1]}</span> :<span>{daojishi[2]}</span>
            </div>
        )
    }
}
